<template>
	<view>
		<view class="waterfall-box h-flex-x h-flex-2" v-if="showList">
			<view>
				<view v-for="(item,index) in leftList" :key="item._render_id"
					class="list-item shadow br04 overHidden"
					:class="{'show': showPage > item._current_page }"
              :style="{'borderRadius': type=='ticket'||type=='noteList'?'12px': type=='diy-ticket'?params.radius+'px':'4px'}"
				>
					<helang-waterfall-line-item
            v-if="type=='line'"
						:params="item"
						tag="left"
						:index="index"
						@height="onHeight"
						@click="onClick"
					></helang-waterfall-line-item>
          <helang-waterfall-note-item
                  v-if="type=='note'"
                  :item="item"
                  :params="params"
                  tag="left"
                  :index="index"
                  @height="onHeight"
                  @click="onClick"
          ></helang-waterfall-note-item>
          <helang-waterfall-ticket-item
              v-if="type=='ticket' || type=='diy-ticket'"
              :item="item"
              :params="params"
              tag="left"
              :index="index"
              @height="onHeight"
              @click="onClick"
          ></helang-waterfall-ticket-item>
          <helang-waterfall-note-list-item
              v-if="type=='noteList'"
              :item="item"
              :params="params"
              tag="left"
              :index="index"
              @height="onHeight"
              @click="onClick"
          ></helang-waterfall-note-list-item>
          <helang-waterfall-ticket-normal-item
              v-if="type=='ticket-normal'"
              :params="item"
              tag="left"
              :index="index"
              @height="onHeight"
              @click="onClick"
          ></helang-waterfall-ticket-normal-item>
				</view>
			</view>
			<view>
				<view v-for="(item,index) in rightList" :key="item._render_id"
					class="list-item shadow br04 overHidden"
					:class="{'show': showPage > item._current_page }"
              :style="{'borderRadius': type=='ticket'||type=='noteList'?'12px': type=='diy-ticket'?params.radius+'px':'4px'}"

        >
					<helang-waterfall-line-item
                        v-if="type=='line'"
						:params="item"
						@height="onHeight"
						@click="onClick"
						tag="right"
						:index="index"
					></helang-waterfall-line-item>
          <helang-waterfall-note-item
                  v-if="type=='note'"
                  :item="item"
                  :params="params"
                  @height="onHeight"
                  @click="onClick"
                  tag="right"
                  :index="index"
          ></helang-waterfall-note-item>
          <helang-waterfall-ticket-item
              v-if="type=='ticket' || type=='diy-ticket'"
              :item="item"
              :params="params"
              @height="onHeight"
              @click="onClick"
              tag="right"
              :index="index"
          ></helang-waterfall-ticket-item>
          <helang-waterfall-note-list-item
              v-if="type=='noteList'"
              :item="item"
              :params="params"
              @height="onHeight"
              @click="onClick"
              tag="right"
              :index="index"
          ></helang-waterfall-note-list-item>
          <helang-waterfall-ticket-normal-item
              v-if="type=='ticket-normal'"
              :params="item"
              @height="onHeight"
              @click="onClick"
              tag="right"
              :index="index"
          ></helang-waterfall-ticket-normal-item>
				</view>
			</view>
		</view>
		
		<slot name="default"></slot>
	</view>
</template>

<script>
	import helangWaterfallLineItem from "./waterfall-line-item.vue"
	import helangWaterfallNoteItem from "./waterfall-note-item.vue"
	import helangWaterfallTicketItem from "./waterfall-ticket-item.vue"
	import helangWaterfallNoteListItem from "./waterfall-note-list-item.vue"
	import helangWaterfallTicketNormalItem from "./waterfall-ticket-normal-item.vue"

	export default {
		name:"helangWaterfallList",
		options:{
			virtualHost: true
		},
		components: {
			"helang-waterfall-line-item": helangWaterfallLineItem,
			"helang-waterfall-note-item": helangWaterfallNoteItem,
			"helang-waterfall-ticket-item": helangWaterfallTicketItem,
			"helang-waterfall-note-list-item": helangWaterfallNoteListItem,
      "helang-waterfall-ticket-normal-item": helangWaterfallTicketNormalItem,
		},
		props:{
			// 组件状态
			status:{
				type: String,
				default:''
			},
			// 待渲染的数据
			list:{
				type: Array,
				default(){
					return [];
				}
			},
			// 重置列表，设置为 true 时，瀑布流会自动重新渲染列表
			reset:{
				type: Boolean,
				default:false
			},
      // 类型
      type:{
          type: String,
          default:''
      },
      params:{
          type: Object,
          default(){
              return {}
          }
      },
		},
		watch:{
			status(newValue,oldValue){
				// 状态变更为 加载成功 时，执行瀑布流数据渲染
				if(newValue == 'success'){
					this.startRender();
				}else if(!this.showList){
					this.resetData();
				}
			},
      list(newValue){
        this.list = newValue;
        this.startRender()
      }
		},
		computed:{
			showList(){
				return !["fail","empty"].includes(this.$props.status);
			}
		},
		data() {
			return {
				// 左侧列表高度
				leftHeight: 0,
				// 右侧列表高度
				rightHeight: 0,
				// 左侧列表数据
				leftList: [],
				// 右侧列表数据
				rightList: [],
				// 待渲染列表
				awaitRenderList:[],
				// 当前展示页码数据
				showPage:1,
			}
		},
		mounted() {
			if(this.$props.status == 'success'){
				this.startRender();
			}
		},
		methods: {
			// 监听高度变化
			onHeight(height, tag) {
				/**
				 * 这个为实际渲染后 CSS 中 margin-buttom 的值，本示例默认为20rpx
				 * 用于解决实际渲染后因为数据条数关系，高度差计算偏差的问题
				 * */
				let marginBottom = uni.upx2px(20);
				
				// console.log(`左高：${this.leftHeight},右高：${this.rightHeight},当前高：${height},插入方向：${tag}`)

				if (tag == 'left') {
					this.leftHeight += (height + marginBottom);
				} else {
					this.rightHeight += (height + marginBottom);
				}
				this.renderList();
			},
			// 组件点击事件
			onClick(index, tag){
				// 对应的数据
				if(tag == 'left'){
					this.$emit("click",this.leftList[index],index,tag);
				}else{
					this.$emit("click",this.rightList[index],index,tag);
				}
			},
			// 渲染列表，这里实现瀑布流的左右分栏
			renderList() {
				// 待渲染长度为 0 时表示已渲染完成
				if(this.awaitRenderList.length < 1){

					this.showPage++;
          this.$emit("done",this.leftHeight>this.rightHeight?this.leftHeight:this.rightHeight);

                    // 为防止 js 数值类型最大值溢出，当高度值大于 1亿时重置高度
					if(this.leftHeight > 100000000){
						if(this.leftHeight > this.rightHeight){
							this.leftHeight = 2;
							this.rightHeight = 1;
						}else{
							this.leftHeight = 1;
							this.rightHeight = 2;
						}
					}
					return;
				}
				let item = {
					...this.awaitRenderList.splice(0,1)[0],
					// 当前数据添加当前页面标识
					_current_page:this.showPage,
					// 当前数据添加一个渲染id，解决 v-for 重复会出现不执行 load 的 BUG
					_render_id:new Date().getTime()
				};
				if(this.leftHeight > this.rightHeight){
					this.rightList.push(item);
				}else{
					this.leftList.push(item);
				}
			},
			// 重置数据
			resetData(){
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.leftList = [];
				this.rightList = [];
				this.awaitRenderList = [];
				// 当前展示页码数据
				this.showPage = 1;
			},
			// 启动渲染
			startRender(){
				if(!this.showList){
					this.resetData();
					return;
				}
				if(!this.$props.list || this.$props.list.length < 1){
					console.log('河浪瀑布流插件提示：当前数据为空，不会触发列表渲染');
					return;
				}
				// 若本次渲染为 重置 则先恢复组件的默认参数
				if(this.$props.reset){
					this.resetData();
				}
				
				this.awaitRenderList = [...this.$props.list];
				this.renderList();
        this.$emit("done");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-box {
		/*padding: 20rpx 10rpx;*/
		box-sizing: border-box;

		>view {
			padding: 10rpx 10rpx;
		}
		
		.list-item{
			margin-bottom: 0;
			// 设置透明，默认是可视的
			opacity: 0;
			// 默认超出隐藏，不影响加载中的文字显示效果
			overflow: hidden;
			height: 0;
			
			&.show{
				margin-bottom: 20rpx;
				opacity: 1;
				overflow: auto;
				height: auto;
			}
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}
</style>